<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <i class="fa fa-angle-left" @click="back"></i>
      <p>积分商城</p>
    </header>

    <div class="photo">
      <img src="../assets/ji.png">
      <div>只因未来公仔 &nbsp; 10积分</div>
      <button @click="getGoods(10)">点击兑换</button>
    </div>

    <div class="photo">
      <img src="../assets/fifa.png">
      <div>世界杯比赛用球 &nbsp; 1000积分</div>
      <button @click="getGoods(1000)">点击兑换</button>
    </div>

    <div class="photolast">
      <img src="../assets/eggs.png">
      <div>一筐鸡蛋 &nbsp; 100积分</div>
      <button @click="getGoods(100)">点击兑换</button>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'Points',
  data() {
    return {
      user: {}
    }
  },

  created() {
    this.user = this.$getSessionStorage('user');
  },

  methods: {
    /**
     * 兑换商品并消耗积分
     * @param {number} points 要消耗的积分
     */
    getGoods(points) {
      if (!this.user.userId) {
        alert('未登录，请重新登录后再试');
        return;
      }

      this.$axios.post(`/CreditController/use/${this.user.userId}/${points}`)
        .then(response => {
          if (response.data.result === 1) {
            alert(`兑换成功，已消耗${points}积分`);
          } else {
            alert('兑换失败，积分可能不足');
          }
        })
        .catch(error => {
          alert(error.response?.data?.message || '兑换请求失败');
          console.error(error);
        });
    },
    back() {
      this.$router.go(-1);
    },
    /**
     * 默认提示积分不足（占位用）
     */
    notEnough() {
      alert('积分不足，兑换失败');
    }
  },

  components: {
    Footer
  }
}
</script>
  
  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
    width: 100%;
    height: 100%;
  }
  
  /****************** header部分 ******************/
  .wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
  
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
  
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .wrapper .photo {
    height: auto;
    width: auto\9;
    width: 100%;
    margin-top: 12vw;
    border-radius: 2.5vw;
    font-size: 5.5vw;
    justify-content: center;
    display: inline-block;
    Text-align: center;
  
  }
  
  .wrapper .photolast {
    height: auto;
    width: auto\9;
    width: 100%;
    margin-top: 12vw;
    border-radius: 2.5vw;
    font-size: 5.5vw;
    justify-content: center;
    display: inline-block;
    Text-align: center;
    margin-bottom: 15vw
  }
  
  
  
  
  
  /****************** 底部菜单部分 ******************/
  .wrapper .footer {
    width: 100%;
    height: 14vw;
    border-top: solid 1px #DDD;
    background-color: #fff;
  
    position: fixed;
    left: 0;
    bottom: 0;
  
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .wrapper .footer li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    color: #999;
    user-select: none;
    cursor: pointer;
  }
  
  .wrapper .footer li p {
    font-size: 2.8vw;
  }
  
  .wrapper .footer li i {
    font-size: 5vw;
  }
  .wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #01B0F2;
    font-size: 4.8vw;
    color: #fff;

    z-index: 10;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    position: fixed;
    left: 0;
    top: 0;
  }

  .wrapper header i {
    margin: 0vw 0vw 0vw 3vw;
    font-size: 6vw;
    user-select: none;
    cursor: pointer;
  }

  .wrapper header p {
    margin: 0vw 0vw 0vw 33.5vw;
  }
  </style>